<template>
  <div>
    <div class="detail-info" style="margin-top: 40px">
      <div class="form-item">
        <h4>基本信息</h4>
        <el-form label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="模块名称">
                <span>{{detailData.name}}</span>
              </el-form-item>
              <el-form-item label="模板标识">
                <span>{{detailData.newTemplate.markId}}</span>
              </el-form-item>
              <el-form-item label="模板名称">
                <span>{{this.detailData.newTemplate.name}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客资类型">
                <span>{{this.detailData.userTypeName}}</span>
              </el-form-item>
              <el-form-item label="页面名称">
                <span>{{this.detailData.pageName}}</span>
              </el-form-item>
              <el-form-item label="状态">
                <span>{{this.detailData.stateName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分公司">
                <span>{{this.detailData.branchName}}</span>
              </el-form-item>
              <el-form-item label="模版图片">
                <img :src="imgHost + '/' + detailData.newTemplate.image" style="width:160px;height:100px;margin:5px 0" alt="">
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="detail-info" style="margin-top: 40px">
      <div class="form-item">
        <h4>上线信息</h4>
        <el-form label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="上线类型">
                <span>{{this.detailData.onlineModeName}}</span>
              </el-form-item>
              <el-form-item label="下线类型">
                <span>{{this.detailData.offlineModeName}}</span>
              </el-form-item>
              <el-form-item label="创建人">
                <span>{{this.detailData.createUser}}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{this.detailData.createTime}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生效时间">
                <span>{{this.detailData.online_time}}</span>
              </el-form-item>
              <el-form-item label="生效时间">
                <span>{{this.detailData.offline_time}}</span>
              </el-form-item>
              <el-form-item label="编辑人">
                <span>{{this.detailData.updateUser}}</span>
              </el-form-item>
              <el-form-item label="编辑时间">
                <span>{{this.detailData.updateTime}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="上线备注">
                <span>{{this.detailData.onlineComment}}</span>
              </el-form-item>
              <el-form-item label="下线备注">
                <span>{{this.detailData.offlineComment}}</span>
              </el-form-item>
              <el-form-item label="审核人">
                <span>{{this.detailData.auditor}}</span>
              </el-form-item>
              <el-form-item label="审核时间">
                <span>{{this.detailData.auditTime}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="detail-info" style="margin-top: 40px">
      <div class="form-item">
        <h4>模块配置</h4>
        <el-table :data="detailData.newModelContents" max-height="300" border width="100%">
          <el-table-column prop="sortId" label="编号" align="center" width="90"></el-table-column>
          <el-table-column prop="comment" label="相关说明" width="300" align="center"></el-table-column>
          <el-table-column prop="contentId" label="关联内容ID" align="center" width="100"></el-table-column>
          <el-table-column prop="name" label="内容名称" align="center" width="120"></el-table-column>
          <el-table-column label="内容形式" align="center" width="100">
            <template scope="scope">
              <span v-if="scope.row.contentMode === 1">商品</span>
              <span v-if="scope.row.contentMode === 2">跳转链接</span>
              <span v-if="scope.row.contentMode === 3"></span>
            </template>
          </el-table-column>
          <el-table-column label="内容类型" align="center" width="100">
            <template scope="scope">
              <span v-if="scope.row.contentType === 1">内容</span>
              <span v-if="scope.row.contentType === 2">满减</span>
              <span v-if="scope.row.contentType === 3">满赠</span>
              <span v-if="scope.row.contentType === 4">普通套餐</span>
              <span v-if="scope.row.contentType === 5">限时抢购</span>
              <span v-if="scope.row.contentType === 6">1+n套餐</span>
              <span v-if="scope.row.contentType === 7">加价购</span>
              <span v-if="scope.row.contentType === 8">单品折扣</span>
            </template>
          </el-table-column>
          <el-table-column
            label="图片"
            width="150">
            <template scope="scope">
              <img :src="imgHost + '/' + scope.row.image" style="max-width:160px;max-height:160px;margin:5px 0" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="内容备注" align="center"></el-table-column>
          <!--<el-table-column prop="ticketName" label="关联广告" align="center" width="100"></el-table-column>-->
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import { apiHost } from '../../../config/settings.js'
  import { column } from '../../../config/proxy.js'
  export default {
    data () {
      return {
        detailData: {
          newTemplate: {}
        }
      }
    },
    methods: {
      searchDetail (id) {
        // type 任意值
        column.modules.detail({id: id, type: 2}, (res) => {
          console.log(res, '详情')
          if (res.message === 'ok') {
            this.detailData = res.content
          } else {
            this.message('查看详情失败', 'error')
          }
        })
      },
      timeDeltSecond (d) { // 时间去秒
        if (d) {
          return d.split(' ')[0]
        }
      },
      message (text, type) { // 消息提示
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      }
    },
    created () {
      this.imgHost = apiHost.imgHost
      this.searchDetail(this.$store.state.tab.uid)
    }
  }
</script>

